<template>
  <div class="app-container">
    <el-card v-if="training">
      <div slot="header" class="clearfix">
        <span>{{ training.chapter }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>视频预览</h3>
          <video
            v-if="training.videoUrl"
            :src="training.videoUrl"
            controls
            style="width: 100%; max-height: 500px; border-radius: 4px;"
          ></video>
          <el-empty v-else description="暂无视频"></el-empty>
        </el-col>
        <el-col :span="12">
          <h3>课程详情</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="课程编号">{{ training.code }}</el-descriptions-item>
            <el-descriptions-item label="培训类型">{{ typeFormat(training.type) }}</el-descriptions-item>
            <el-descriptions-item label="主要知识点">
              <div v-html="training.keyPoints"></div>
            </el-descriptions-item>
            <el-descriptions-item label="文字讲解">
              <div v-html="training.textExplanation"></div>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-skeleton :rows="6" animated v-else />
  </div>
</template>

<script>
import { getTraining } from "@/api/system/training";

export default {
  name: "TrainingDetail",
  data() {
    return {
      training: null
    };
  },
  created() {
    const id = this.$route.params.id;
    if (id) {
      this.fetchTrainingDetails(id);
    }
  },
  methods: {
    fetchTrainingDetails(id) {
      getTraining(id).then(response => {
        this.training = response.data;
      });
    },
    typeFormat(type) {
      if (type === 'pre_sales') return '售前';
      if (type === 'in_sales') return '售中';
      if (type === 'after_sales') return '售后';
      return '其他';
    }
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style> 